<!--  -->
<template>
  <div class="Hellodesi">
    <div class="container">
      <div class="header-logo">
        <!-- logo -->
        <div class="header-nav">
          <a href="javascript:;" class="logo">
            <img class="milogin1" src="../assets/img/logino.png" alt="" />
          </a>
        </div>
        <!-- logo2 -->
        <div class="header_blockmi2">
          <a href="javascript:;" class="header_block">
            <img src="../assets/img/mi2-logo.gif" alt="" />
          </a>
        </div>
        <!-- 分类 -->
        <div class="header-search">
          <ul class="searchul">
            <li>
              <a href="javascript:;" to="/Moer">小米手机</a>
              <div class="Hellotion">
                <div class="droPdown">
                  <ul class="children-list">
                    <li class="first">
                      <div class="figure-thumb">
                        <img src="../assets/img/DWS/JS1.webp" alt />
                      </div>
                      <div class="title">小米MIX FOLD</div>
                      <p class="price">9999元起</p>
                    </li>
                    <li class="first">
                      <div class="figure-thumb">
                        <img src="../assets/img/DWS/JS2.webp" alt />
                      </div>
                      <div class="title">小米11 Ultra</div>
                      <p class="price">5999元起</p>
                    </li>
                    <li class="first">
                      <div class="figure-thumb">
                        <img src="../assets/img/DWS/JS3.webp" alt />
                      </div>
                      <div class="title">小米11 Pro</div>
                      <p class="price">4999元起</p>
                    </li>
                    <li class="first">
                      <div class="figure-thumb">
                        <img src="../assets/img/DWS/JS4.webp" alt />
                      </div>
                      <div class="title">小米11 青春版</div>
                      <p class="price">2299元起</p>
                    </li>
                    <li class="first">
                      <div class="figure-thumb">
                        <img src="../assets/img/DWS/JS5.webp" alt />
                      </div>
                      <div class="title">小米10S</div>
                      <p class="price">3299元起</p>
                    </li>
                    <li class="first">
                      <div class="figure-thumb">
                        <img src="../assets/img/DWS/JS6.webp" alt />
                      </div>
                      <div class="title">小米11</div>
                      <p class="price">3999元起</p>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
            <li><a href="javascript:;">Redmi红米</a>
            <div class="Hellotion">
                <div class="droPdown">
                  <ul class="children-list">
                    <li class="first">
                      <div class="figure-thumb">
                        <img src="../assets/img/DWS/MH2.webp" alt />
                      </div>
                      <div class="title">小米MIX FOLD</div>
                      <p class="price">9999元起</p>
                    </li>
                    <li class="first">
                      <div class="figure-thumb">
                        <img src="../assets/img/DWS/MH3.webp" alt />
                      </div>
                      <div class="title">小米11 Ultra</div>
                      <p class="price">5999元起</p>
                    </li>
                    <li class="first">
                      <div class="figure-thumb">
                        <img src="../assets/img/DWS/MH1.webp" alt />
                      </div>
                      <div class="title">小米11 Pro</div>
                      <p class="price">4999元起</p>
                    </li>
                    <li class="first">
                      <div class="figure-thumb">
                        <img src="../assets/img/DWS/MH4.webp" alt />
                      </div>
                      <div class="title">小米11 青春版</div>
                      <p class="price">2299元起</p>
                    </li>
                    <li class="first">
                      <div class="figure-thumb">
                        <img src="../assets/img/DWS/MH5.webp" alt />
                      </div>
                      <div class="title">小米10S</div>
                      <p class="price">3299元起</p>
                    </li>
                    <li class="first">
                      <div class="figure-thumb">
                        <img src="../assets/img/DWS/MH6.webp" alt />
                      </div>
                      <div class="title">小米11</div>
                      <p class="price">3999元起</p>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
            <li><a href="javascript:;">电视</a>
            <div class="Hellotion">
                <div class="droPdown">
                  <ul class="children-list">
                    <li class="first">
                      <div class="figure-thumb">
                        <img src="../assets/img/DWS/DS1.webp" alt />
                      </div>
                      <div class="title">小米MIX FOLD</div>
                      <p class="price">9999元起</p>
                    </li>
                    <li class="first">
                      <div class="figure-thumb">
                        <img src="../assets/img/DWS/DS2.webp" alt />
                      </div>
                      <div class="title">小米11 Ultra</div>
                      <p class="price">5999元起</p>
                    </li>
                    <li class="first">
                      <div class="figure-thumb">
                        <img src="../assets/img/DWS/DS3.webp" alt />
                      </div>
                      <div class="title">小米11 Pro</div>
                      <p class="price">4999元起</p>
                    </li>
                    <li class="first">
                      <div class="figure-thumb">
                        <img src="../assets/img/DWS/DS4.webp" alt />
                      </div>
                      <div class="title">小米11 青春版</div>
                      <p class="price">2299元起</p>
                    </li>
                    <li class="first">
                      <div class="figure-thumb">
                        <img src="../assets/img/DWS/DS5.webp" alt />
                      </div>
                      <div class="title">小米10S</div>
                      <p class="price">3299元起</p>
                    </li>
                    <li class="first">
                      <div class="figure-thumb">
                        <img src="../assets/img/DWS/DS6.webp" alt />
                      </div>
                      <div class="title">小米11</div>
                      <p class="price">3999元起</p>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
            <li><a href="javascript:;">笔记本</a></li>
          </ul>
        </div>
        <!-- 搜索框 -->
        <div class="souinputte">
          <div class="wrapper">
            <input class="asdinput" type="text" name="keyword" />
            <a href="javascript:;">
              <i class="iconfont iconsousuokuang"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import Hellotion from "./Hellotion.vue";
export default {
  name: "Hellodesi",
  components: {
    // Hellotion,
  },
};
</script>
<style lang="less" scoped>
.Hellodesi {
  position: relative;
  z-index: 20;
  .container {
    width: 1226px;
    margin: 0 auto;
    .header-logo {
      height: 80px;
      // margin: 30px 0 0px 0;
      .header-nav {
        float: left;
        width: 55px;
        height: 80px;
        line-height: 80px;
      }
      .logo {
        position: relative;
        display: block;
        width: 55px;
        height: 55px;
        margin: 12px 0 ;
        border-radius: 15px;
        overflow: hidden;
      }
      .logo:hover .milogin1 {
        perspective-origin: 50% 50%;
        transform: translateX(-55px);
        transition: all 0.5s;
      }
      /* 小米商标动态完成 */
      .header_blockmi2 {
        float: left;
        text-align: left;
        height: 50px;
        margin: 15px 10px;
      }
      .header-search {
        float: left;
        text-align: left;
        .searchul {
          text-align: center;
          display: block;
          clear: both;
          height: 0;
          li {
            float: left;
            text-align: center;
            line-height: 78px;
            padding: 0 20px;
            a {
              font-size: 16px;
              color: #333;
            }
            a:hover {
              color: #ff6700;
            }
            &:hover {
              .Hellotion {
                // display: block;
                height: 220px;
                opacity: 1;
              }
            }
            .Hellotion {
              position: absolute;
              left: 0;
              top: 80px;
              z-index: 22;
              width: 100%;
              opacity: 0;
              height: 0;
              box-shadow: 0px 7px 6px 0px rgba(0, 0, 0, 0.11);
              border: 1px solid #e0e0e0;
              box-sizing: border-box;
              background: #fff;
              overflow: hidden;
              transition: all .2s linear;
              .droPdown {
                width: 1226px;
                margin: 0 auto;
                .children-list {
                  margin: 0;
                  padding: 0;
                  list-style-type: none;
                  font-size: 15px;
                  .first {
                    position: relative;
                    float: left;
                    width: 180px;
                    padding: 35px 12px 0;
                    text-align: center;
                    &:nth-child(n + 2)::before {
                      position: absolute;
                      left: 0;
                      top: 40px;
                      z-index: 1;
                      width: 1px;
                      height: 100px;
                      content: "";
                      background-color: #e0e0e0;
                    }
                    .figure-thumb {
                      width: 160px;
                      height: 110px;
                      margin: 0 auto 16px;
                      text-align: center;
                    }
                    .title {
                      line-height: 20px;
                    }
                    .price {
                      line-height: 20px;
                      color: #ff6700;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .souinputte {
        float: right;
        width: 319px;
        margin: 14px 0;
        .wrapper {
          height: 50px;
          border: 1px solid #e0e0e0;
          display: flex;
          align-items: center;
          input {
            border: none;
            border-right: 1px solid #e0e0e0;
            width: 264px;
            height: 50px;
            padding-left: 14px;
            font-size: 16px;
          }
          a {
            display: inline-block;
            width: 50px;

            i {
              line-height: 50px;
              padding: 26%;
              font-size: 25px;
            }
            :hover {
              color: #fff;
              background-color: #ff6700;
            }
          }
        }
      }
    }
  }
}
</style>
